
import { useState,useMemo } from 'react';

function Fruit() {
  const [likeNum, setLikeNum] = useState(0);
  const [peach, setPeach] = useState({
    num: 1,
    unitPrice: 5
  });
  const [banana, setBanana] = useState({
    num: 1,
    unitPrice: 4
  });
  const totalPrice = useMemo(() => { 
    console.log("价格重新计算了--");
    return (peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)
  }, [peach, banana]);
  function changePeachPrice() {
    setPeach( {...peach, unitPrice: peach.unitPrice+1})
  }
  function changeBananaPrice() {
    setBanana( {...banana, unitPrice: banana.unitPrice+1})
  }
  // const totalPrice = () => {
  //   console.log("价格重新计算了--");
  //   return (peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)
  // }

  return(<div>
    <div>水果店</div>
    <div>
      <h3>
        点赞数：{likeNum}
      </h3>
      <button onClick={()=>{setLikeNum(likeNum+1)}}>点赞</button>
    </div>
    <div>
       <span>
       桃子单价：{peach.unitPrice +' '}
      </span>
      <span>
        桃子数量: {peach.num +' '}
      </span>
      <button onClick={changePeachPrice}>修改桃子的单价</button>
    </div>
    <div>
       <span>
       香蕉单价：{banana.unitPrice +' '}
      </span>
      <span>
       香蕉数量: {banana.num +' '}
      </span>
      <button onClick={changeBananaPrice}>修改香蕉的单价</button>
    </div>
    <div>
      <h3>总价：{totalPrice}</h3>
    </div>
  </div>)
}
export default  Fruit